<template>
  <div class="flow-attr">
    <el-form label-position="left" class="flow-config-attr" label-width="100px">
      <el-form-item
        v-if="_value.type === 'Job' || _value.type === 'Start'"
        label="关联子流程"
      >
        <el-button
          style="margin-right: 10px"
          size="small"
          type="primary"
          @click="handleOpenSubflowPicker"
        >
          选择子流程
        </el-button>
        <el-tooltip placement="top">
          <template #content>
            当前节点审批完成时, 会自动发起子流程实例并暂停父流程当前节点,
            待子流程完成后再继续执行父流程
          </template>
          <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
        </el-tooltip>
        <div class="w-org-items">
          <el-tag
            v-if="_value.props.subDefFlowId && _value.props.subDefFlowName"
            closable
            type="primary"
            @close="handleClearSubflow"
            style="margin-right: 10px"
          >
            {{ _value.props.subDefFlowName }}
          </el-tag>
        </div>
      </el-form-item>
    </el-form>
    <DefFlowPicker ref="defFlowPickerRef" @change="handleSubDefFLowChange" />
  </div>
</template>
<script setup lang="ts">
import DefFlowPicker from "@/components/flow/defFlowPicker.vue";
import { ref } from "vue";
const defFlowPickerRef = ref<any>(null);
const _value = defineModel<any>();

const handleOpenSubflowPicker = () => {
  defFlowPickerRef.value?.show();
};

const handleSubDefFLowChange = row => {
  _value.value.props.subDefFlowId = row.id;
  _value.value.props.subDefFlowName = row.flowName;
};

const handleClearSubflow = () => {
  _value.value.props.subDefFlowId = "";
  _value.value.props.subDefFlowName = "";
};
</script>
